<template>
    <el-dialog :title="detailData.plateNo" :visible.sync="outerVisible" width="1000px">
        <div class="flex flex-direction ">
            <div v-loading="detailLoading" class="flex">
                <div class="flex-sub margin-right flex flex-direction">
                    <div style="width: 150px; z-index: 999; text-align: right; position: absolute; right: 20px; top: 65px;">
                        <el-button size="mini" type="primary" icon="el-icon-arrow-left"
                                   @click="getParentDetails(indexs -1)">
                            上一条
                        </el-button>
                        <el-button size="mini" type="primary"
                                   @click="getParentDetails(indexs +1)">
                            下一条<i class="el-icon-arrow-right el-icon--right" />
                        </el-button>
                    </div>
                    <vehicle-info :test="test" />
                    <div class="flex  margin-top-sm" style="margin-top: 10px;">
<!--                        <el-button v-show="step !='qt'" size="mini" type="primary" icon="el-icon-edit" style="width: 120px;" @click="handleEdit">编辑驾驶员信息</el-button>-->
                    </div>
                </div>
<!--                <vehicle-media :table-data="tableData" style="width: 50%;" />-->
                <vehicle-media :detail-data="test" style="width: 50%;" />
            </div>

<!--            <el-tabs v-model="queryParams.Parameter" class="margin-top-xs " @tab-click="handleTabClick">-->
<!--                <el-tab-pane label="历史过车数据" name="1" />-->
<!--&lt;!&ndash;                <el-tab-pane label="7日内超限数据" name="2" />&ndash;&gt;-->
<!--&lt;!&ndash;                <el-tab-pane label="30天内超限数据" name="3" />&ndash;&gt;-->
<!--            </el-tabs>-->


            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData" size="mini"
                      header-cell-class-name="table-header" style="width: 100%; margin-top: -15px;" max-height="200">
                <el-table-column label="车牌号码" width="100" prop="plateNo" />
                <el-table-column label="检测时间" width="200">
                    <template slot-scope="scope">
                        {{ moment(scope.row.gmtWeighOn).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="本次检测车货总重（kg）" width="100" prop="currentWeight" />
                <el-table-column label="车辆本次检测长度（CM）" width="100" prop="currentLength" />
                <el-table-column label="车辆本次检测宽度（CM）" width="100" prop="currentWidth" />
                <el-table-column label="车辆本次检测高度（CM）" width="100" prop="currentHeight" />
                <el-table-column label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看详情</el-button>
<!--                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.$index)">查看详情</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <!--            <div class="Pagination">-->
            <!--                <el-pagination-->
            <!--                    background-->
            <!--                    layout="total, sizes,prev, pager, next,jumper"-->
            <!--                    :current-page.sync="queryParams.CurrentPage"-->
            <!--                    :page-size="20"-->
            <!--                    :page-sizes="[20]"-->
            <!--                    :total="totalCount"-->
            <!--                    @current-change="handleCurrentChange" />-->
            <!--            </div>-->
        </div>
    </el-dialog>
</template>

<script>
// import {UpdateBasicInformation, InsertBasicInformation} from '@/api/overrunPenaltyApi';
import {GetVehicleDetectDetail} from '@/api/parkUnloadApi';
import moment from 'moment';
import VehicleInfo from '@/modules/components/VehicleDetail/vehicle-info';
import VehicleMedia from '@/modules/components/VehicleDetail/vehicle-media';
export default {
    name: 'WeightInformation',
    components: {
        VehicleInfo, VehicleMedia
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        information: Object,
        initDetailData: Object,
        initDetailData1: Object,
        // deviceType: Object,
        // 当前返回list的条数
        tableSize: Number,
        // 当前选中列在数据中的下标值
        indexs: Number,
        // 当前页
        currentPage: Number,
        // 当前查询的数据的总条数(分页的总数)
        total: Number,
        isAdd: {
            type: Boolean,
            default: false
        },
        step: String
    },
    data() {
        return {
            // 处罚对象单位信息和处罚对象个人信息单选
            radio: '',
            totalCount: 0,
            unitInfoUnable: false,
            personInfoUnable: false,
            outerVisible: false,
            detailLoading: false,
            isDisabled: false,
            invalidReasonFlag: false,
            isLoading : false,
            isIllegal: '',
            tableData: [],
            localVehicleDetail: null,
            queryParams: {},
            test:{},
            // detailData:{},
        };
    },
    computed: {
        detailData() {
            return this.localVehicleDetail || this.initDetailData;
        },
        detailData1(){
            return this.initDetailData1;
        }
    },
    watch: {
        initDetailData(val) {
            this.localVehicleDetail = null;
            // this.queryParams = {
            //     Parameter: '1',
            //     CurrentPage: 1,
            //     plate_no: val.plate_no
            // };
            // this.mediaTab = 'img';
            // debugger
            this.initForm();
        }
        // information(newValue, oldValue) {
        //     this.form = newValue;
        //     // this.radio = '';
        //     this.unitInfoUnable = false;
        //     this.personInfoUnable = false;
        //     this.queryParams = {
        //         CurrentPage: 1
        //     };
        // }
        // detailData(newValue, oldValue){
        //     this.initForm();
        // }
    },
    mounted() {
        this.initForm();
    },
    methods: {
        moment,
        initForm() {
            this.test = this.initDetailData;
            // this.form = this.information;
            // this.isLoading = true;
            GetVehicleDetectDetail(this.detailData1).then(res => {
                this.tableData = res.res.GetVehicleDetectDetail;
                this.test = this.tableData[0];
                console.log("数组");
                console.log(this.tableData);
            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });

        },
        handleTabClick() {
            this.queryParams.CurrentPage = 1;
            this.initForm();
        },
        // handleView(i){
        handleView(item){
            this.detailLoading = true;

            setTimeout(() => {
                // this.localVehicleDetail = item;
                this.test = item;
                this.detailLoading = false;
            }, 100);
            initForm();
            console.log(this.tableData);
            console.log("查看detailData1");
            console.log(this.localVehicleDetail);
        },
        show() {
            this.outerVisible = true;
        },
        showHandleResult(param) {
            if (param.target.tagName == 'SPAN') {
                this.invalidReasonFlag = true;
            }

        },
        getParentDetails(index) {
            // debugger
            console.log(index);

            if (index < 0) {
                if (this.currentPage == 1) {
                    this.$message({
                        message: '已是第一条',
                        type: 'warning'
                    });
                    return false;
                } else {
                    this.$emit('getList', this.currentPage - 1);
                    index = 0;
                    setTimeout(() => {
                        this.$emit('handleView', index);
                    }, 1000);
                }
            }
            if (this.tableSize == index) {

                if (((this.currentPage - 1) * 20 + index + 1) > this.total) {
                    this.$message({
                        message: '已是最后一条',
                        type: 'warning'
                    });
                    return false;
                } else {
                    this.$emit('getList', this.currentPage + 1);
                    index = 0;
                    setTimeout(() => {
                        this.$emit('handleView', index);
                    }, 1000);
                    return false;
                }
            }
            this.$emit('handleViews', index);
        },
        isBlank(str) {
            return !this.isNotBlank(str);
        },
        isNotBlank(str) {
            if (str != null && str != undefined && str != '' & str != ' ') {
                return true;
            }
            return false;
        }
    }
};
</script>

<style scoped>
>>>.el-button--mini,
>>>.el-button--mini.is-round {
    padding: 7px 5px;
}
>>>.el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0;
}
/deep/
.el-dialog__body {
    padding: 10px 20px;
}
/deep/
.el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #dcdfe6;
}

</style>
